<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>项目展示表单</title>

		<style>
			body {
				width: 1920px;
				height: 1080px;
				background-color: #F6F6FB;
				
				background-position-x: 1735px;
				overflow:hidden;
			}
			/*导航样式 开始*/
.top_div {
	background: #F6FAFB;
	position: fixed;
	border-bottom: 1px solid #AAAAAA;
	top: 0px;
}


.mianBao {
	display: inline-block;
}


.mianBao a {
	text-decoration: none;
	color: #AAAAAA;
}


.mianBao a:hover {
	cursor: pointer;
	text-decoration: underline;
}
/*导航样式结束*/
			/*项目开始*/
			
			.project_div {
				width: 80%;
				height: 500px;
				border: 1px solid #F3F3F3;
				margin: 0 auto;
				background: #FBFBFB;
				margin-top: 20px;
				color: #858D88;
				box-shadow: 
				5px 0 20px black/*右边阴影*/
			}
			/*产品图片*/
			
			.project_div .project_picture {
				width: 31%;
				height: 100%;
				float: left;
			}
			/*产品字段*/
			
			.project_prop {
				width: 34%;
				border-right: 1px solid #E5E5DF;
				height: 100%;
				float: left;
			}
			
			.project_prop_val {
				width: 34.9%;
				height: 100%;
				float: right;
			}
			
			.project_prop div,
			.project_prop_val div {
				width: 100%;
				height: 33%;
				border-bottom: 1px solid #E5E5DF;
				position: relative;
				display: table;
				
			}
			
			.project_prop div {
				text-align: center;
			}
			
			.project_prop div p{
				font-family: '楷体';
				font-size: 22px;
				position: relative;
				top: 35px;
			}
			.project_prop_val div p {
				font-family: '楷体';
				font-size: 22px;
				position: relative;
				top: 50px;
			}
			/*项目结束*/
			/*产品列表开始*/
			
			.product_list {
				width: 300px;
				display: inline-block;
				border: 1px solid #E5E5DF;
				text-align: center;
				margin-top: 2px;
				border-radius: 20px;
				-moz-border-radius: 20px;
				-webkit-border-radius：20px;
			}
			
			.product_list .product_name{
				text-decoration: none;
				display: inline-block;
				color: #617DA8;
			}
			
			.product_list a:hover{
				text-decoration: underline;
			}
		</style>
	</head>

	<body style="background:  url(${ctxStatic }/newInterFace/img/background.png) no-repeat center 50%;background-size:cover;">

		<c:set var="bnasLength" value="${fn:length(bnas) }"></c:set>


	<!--面包屑导航-->
	<div class="top_div" style="width: 100%; color: #AAAAAA; height: 40px;">
		<c:forEach items="${sessionScope.bnas }" var="bna" varStatus="st">
			<div class="mianBao" style="width: auto;">
				<p align="center">
					<c:choose>
						<c:when test="${st.index==0 }">
							<%-- <a href="${bna.url }?goback=${bnasLength-st.index}">${bna.label }</a> --%>
							<a href="../baseData/enInterFace">Home</a>
						</c:when>
						<c:when test="${st.index==bnasLength-1 }">
							<a href="javascript:">${bna.label }</a>
						</c:when>
						<c:otherwise>
							<c:choose>
								<c:when test="${fn:contains(bna.url,'?')}">
									<a href="${bna.url }&goback=${bnasLength-st.index}">${bna.label }</a>
								</c:when>
								<c:otherwise>
									<a href="${bna.url }?goback=${bnasLength-st.index}">${bna.label }</a>
								</c:otherwise>
							</c:choose>
						</c:otherwise>
					</c:choose>
				</p>
			</div>
			<c:if test="${st.index!=bnasLength-1 }">
			>>>
			</c:if>
		</c:forEach>
	</div>

		<!--项目标题和公司logo-->
		<div style=" margin-top: 50px;">
			<a href="../baseData/newinterface"><img style="vertical-align:middle;" width="300px;" alt="LOGO" src="${ctxStatic }/newInterFace/img/LOGO1.png"></a>
			<font aling="center" style="margin-left:350px;letter-spacing: 10px;font-size: 40px;font-family: '宋体';color: #EE7700;">Project performance</font>
		</div>
		
		<div class="project_div">
			<div class="project_picture">
				<div style="height: 100%;width: 100%;text-align: center;border-right: 1px solid #E5E5DF;">
					<c:if test="${empty sfProject.projectPicUrl }">
						<img src="${ctxStatic }/newInterFace/img/temp1.png" style="width: 330px;margin-top: 100px;" />
					</c:if>
					<c:if test="${not empty sfProject.projectPicUrl }">
						<img src="${sfProject.projectPicUrl}" style="width: 330px;margin-top: 100px;" />
					</c:if>
					<p style="margin-top: 20px;line-height: 30px;font-size: 20px;">${sfProject.name}</p>
				</div>
			</div>
			<div class="project_prop">
				<div>
					<p>
					Customer name
					</p>
				</div>
				<div>
					<p>
					Project type
					</p>
				</div>
				<div style="border: none;">
					<p>
						Project address
					</p>
				</div>
			</div>
			<div class="project_prop_val">
				<div>
					<p>${sfProject.customName }</p>
				</div>
				<div>
					<p>${sfProject.type}</p>
				</div>
				<div style="border: none;">
					<p>${sfProject.area }${sfProject.city }</p>
				</div>
			</div>
		</div>
		
		<!-- 所用机型 -->
		<div style="width: 80%;height: 50px;background-color: #F6FAFB;text-align: center;margin:0 auto ">
			<p style="line-height:50px ;">
				<img src="${ctxStatic }/newInterFace/img/timg2.gif" style="width:20px;position: relative;top: 10px;"/><font style="color: #9F9F9F;font-size: 20px;font-family: '华文中宋';margin-left: 5px;">Used models<img src="${ctxStatic }/newInterFace/img//timg2.gif" style="width:20px;position: relative;top: 10px;margin-left: 5px;"/></font>
			</p>
		</div>


		<!-- 产品列表 -->
		<div class="product_div" style="width:80%;margin:0 auto;" align="center">
			<c:forEach items="${list}" var="product">
				<div class="product_list">
					<a href="../baseData/enProductForm?id=${product.id}&pid=${sfProject.id}">
						<c:if test="${empty product.productPicURL }"><img src="${ctxStatic }/newInterFace/img/temp1.png" style="height: 150px;" /></c:if>
						<c:if test="${not empty product.productPicURL }"><img src="${product.productPicURL }" style="height: 150px;" /></c:if>
					</a>
					<p style="margin: 0px;">
						<a href="../baseData/enProductForm?id=${product.id}&pid=${sfProject.id}" class="product_name">Product number：${product.code}</a>
					</p>
				</div>
			</c:forEach>
		</div>

	</body>

</html>